<template>
      <div>
            <el-card style="width:400px;margin:60px auto">
                  <div slot="header">
                        <img src="@/assets/logo.png">登录
                  </div>
                  <!-- 登录 begin -->
                  <el-form ref="form" :model="loginData" status-icon label-width="80px" label-position="left" :rules="rules">
                        <!-- 用户名 -->
                        <el-form-item label="用户名" prop="username">
                             <el-input v-model="loginData.username"></el-input>
                        </el-form-item>
                        <!-- 密码 -->
                        <el-form-item label="密码" prop="password">
                              <el-input v-model="loginData.password" type="password"></el-input>
                        </el-form-item>
                        <el-form-item style="text-align:right">
                              <router-link to="/users/register" class="reg">没有账号?立即注册></router-link>
                        </el-form-item>
                        <el-form-item>
                              <el-button type="primary" @click="login">登录</el-button>
                              <el-button @click="$refs.form.resetFields()">重置</el-button>
                        </el-form-item>
                  </el-form>
                  <!-- 登录 end -->
                        
            </el-card>
      </div>
</template>
<script>
export default {
      data(){
            // 验证用户名是否存在
            var usernameLogin=(rule,value,cb)=>{
                  this.$http.post('/users/usernameExist',this.$qs.stringify({username:value})).then((result)=>{
                        if(result.data.data=='false'){
                            cb(new Error('此用户名不存在'))
                        }else{
                              cb()
                        }
                  })
            };
            // 验证密码是否正确
            var passwordLogin=(rule,value,cb)=>{
                  this.$http.post('/users/passwordLogin',this.$qs.stringify(this.loginData)).then((result)=>{
                        if(result.data.error==0){
                              cb()
                        }else{
                              cb(new Error('密码错误'))
                        }
                  })
            };
            return {
                  buttonDisabled:false,
                  loginData:{
                        username:'',
                        password:'',
                  },
                  rules:{
                        username:[
                              {required:true,message:'用户名必须填写',trigger:'change'},
                              {validator:usernameLogin,trigger:'blur'}
                        ],
                        password:[
                              {required:true,message:'密码必须填写',trigger:'change'},
                              {validator:passwordLogin,trigger:'blur'}
                        ]
                  }
            }
      },
      methods:{
            login(){
                  this.$refs.form.validate(pass=>{
                        if(pass){ 
                              this.$router.push('/index')
                        }
                  })
                  
            }
      },
      
}
</script>
<style>
.reg{
      color: #f56c6c;
}
</style>
